<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>博客编辑页</title>
		<link rel="stylesheet" href="css/common.css">
		<link rel="stylesheet" href="css/blog_edit.css">
		
		
		<!-- jquery不是editor.md的一部分而是editor.md的依赖的库 
		jquery可以说是JS世界中，最知名的第三方库(没有之一)
		放在十年前jquery在JS中的地位就相当于Spring在Java中的地位 
		正因为jquery非常非常火所以很多第三方库也要依赖jquery.
		就需要通过其他手段来安装引入jquery  直接去官网下载（github下载）解压editor.md
		但是没有js/jquery.min.js 所以还要去网上搜 jquery cdn下载通过
		jQuery 3.x
                 jQuery Core 3.6.1 - uncompressed, minified, slim, slim minified
				 的 minified下载
				 
		js是需要通过网络来加载的期望内容尽量短从而节省带宽
		minifed版本就是属于被压缩过的(去掉空格换行之类的，把变量名替换成abcd这种)
		打开jquery的源码文件，直接复制粘贴到vscode或者Hbuilder X......中保存到jquery.min.js这个文件中即可.
		(虽然专业的前端开发不会用这种方式来下载安装jquery,确实有更好的办法但是当前对于咱们来说这就是最简单的办法)
		也可以直接把https://code jquery.com/jquery-3.6.0.min.js给写到script的src中~~
		但是这里有个小问题就是https://code.jquery.com/jquery-3.6.0.min.js不稳定有时候访问不了，为了避免麻烦直接还是复制到本地了--		 
        -->
				 
				 
		<!-- 引入editor.md的依赖 -->
		<link rel="stylesheet" href="editor.md/css/editormd.min.css">
		<script src="js/jquery.min.js"></script>
		<script src="editor.md/lib/marked.min.js"></script>
		<script src="editor.md/lib/prettify.min.js"></script>
		<script src="editor.md/editormd.js"></script>
		
		
	
	</head>
	<body>
		
		<!-- 导航栏 -->
		<div class="nav">
			<img src="img/logo2.jpg" alt="">
			<span>我的博客系统</span>
			<!-- 空白元素 占位置用的 -->
			<div class="spacer"></div>
			<a href="blog_list.html">主页</a>
			<a href="blog_edit.html">写博客</a>
			<a href="#">注销</a>
		</div>
		
		 
		
		
		<!-- 博客编辑页的容器 -->
		<div class="blog_edit_container">
			<div class="title">
				<!-- placeholder在没输入之前会显示的内容 -->
				<input type="text" placeholder="在此处输入标题">
				<button>发布文章</button>
			</div>
			
			
			<!-- 放置editor.md编译器 -->
			<div id="editor">
				
			</div>
			
		</div>
		 
		
		
		
		<script>
			//初始化编辑器
		let editor = editormd("editor",{
			//这里的尺于必须在这里设置，设置样式会被editormd 自动覆盖掉。	
			width:"100%",
			//设定编辑器高度
			height:"calc(100% - 45px)",
			//编辑器中的初始内容
			markdown: "# 在这里写下一篇博客",
			//指定editor . md依赖的插件路径
			path: "editor.md/lib/",
		});
		</script>
	</body>
</html>